<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { inject, onMounted, ref } from 'vue'

import { ECOption } from 'types/echarts'
import { LegendComponent, ToolboxComponent } from 'echarts/components'

defineOptions({
  name: 'Menu6'
})

const { t } = useI18n()

const text = ref('')
// 获取该用户的所有关键字
const tableData = [
  {
    keyword: '笔记本电脑',
    search_volume: '1006087',
    level: '高',
    cost: '300',
    show_number: '90769',
    click: '3260',
    transform: '3.59%',
    text: '轻薄便携，随时随地畅享高效办公！全新笔记本电脑，搭载最新处理器和高速固态硬盘，让你的工作更加顺畅。超长续航时间，满足你全天候的使用需求。精致的外观设计，让你在商务场合中脱颖而出。购买即送精美配件套装，赶快行动吧！'
  },
  {
    keyword: '联想',
    search_volume: '189064',
    level: '低',
    cost: '200',
    show_number: '19769',
    click: '203',
    transform: '1.03%',
    text: '联想，让科技更智能。作为全球领先的科技公司，我们一直致力于为用户带来更加便捷、高效的数字生活体验。从笔记本电脑到智能手机，从智能家居到智能办公，我们的产品涵盖方方面面，满足您的需求。\n我们的产品设计精美、性能卓越，拥有极高的品质和可靠性。同时，我们还不断探索创新技术，为用户带来更多惊喜和便利。无论是工作还是娱乐，联想都能为您提供最佳的选择和服务。\n选择联想，就是选择了更好的生活方式。让我们一起迎接未来的挑战吧！'
  },
  {
    keyword: 'thinkPad',
    search_volume: '106087',
    level: '中',
    cost: '120',
    show_number: '9769',
    click: '122',
    transform: '1.25%',
    text: 'thinkPad，你的思考伙伴。从诞生之初就专注于打造高效稳定的商务利器，历经20余年的发展，已成为全球顶尖企业的首选品牌。我们不仅仅是一台电脑，更是你事业成功的得力助手。\nThinkPad拥有卓越的性能和稳定性，让你在繁忙的工作中无后顾之忧。同时，我们还提供了多种配置选择和个性化定制服务，满足不同需求的用户。无论是日常办公还是专业设计、编程开发，ThinkPad都能为你提供最优质的服务体验。\n我们坚信，只有真正了解用户的需求，才能创造出更好的产品。因此，我们一直致力于不断创新和完善产品设计，为用户带来更加便捷、高效的使用体验。让ThinkPad成为你事业路上的坚实后盾，助你成就辉煌！'
  },
  {
    keyword: '小新Pro14',
    search_volume: '8032',
    level: '中',
    cost: '200',
    show_number: '19769',
    click: '403',
    transform: '2.03%',
    text: '小新Pro14，你值得拥有！搭载第11代英特尔酷睿处理器，性能卓越，流畅无比。14英寸2.8K分辨率屏幕，色彩还原度高，让你尽享视觉盛宴。超轻薄金属机身，轻盈便携，随时随地畅享高效办公和娱乐体验。还有超大内存和高速固态硬盘支持，让你尽情存储和处理各种文件和数据。小新Pro14，不仅是一款电脑，更是你的工作和娱乐好伙伴！'
  },
  {
    keyword: '拯救者',
    search_volume: '12964',
    level: '低',
    cost: '80',
    show_number: '9328',
    click: '1002',
    transform: '10.74%',
    text: '拯救者，让你的生活更加从容！我们的产品不仅仅是一种工具，更是一种信仰。当你遇到困难和挑战时，拯救者会给你带来力量和勇气，让你摆脱困境，重新获得自信。无论是在工作中还是生活中，拯救者都是你最好的伙伴。选择拯救者，就是选择了一种积极向上的生活方式。让我们一起成为拯救者吧！'
  }
]

function getUnClick() {
  let show = 0
  for (let i = 0; i < tableData.length; i++) {
    show = show + parseInt(tableData[i].show_number)
  }
  return show - getClick()
}

function getClick() {
  let click = 0
  for (let i = 0; i < tableData.length; i++) {
    click = click + parseInt(tableData[i].cost)
  }
  return click
}

function getCost() {
  let cost = 0
  for (let i = 0; i < tableData.length; i++) {
    cost = cost + parseInt(tableData[i].click)
  }
  return cost
}

function getCPC() {
  return ((getCost() * 10000) / getClick()).toFixed(0)
}

function getSearch() {
  let search = 0
  for (let i = 0; i < tableData.length; i++) {
    search = search + parseInt(tableData[i].search_volume)
  }
  const range = search * 0.2
  const min = search - range
  const max = search + range
  return [
    (Math.random() * (max - min) + min).toFixed(0),
    (Math.random() * (max - min) + min).toFixed(0),
    (Math.random() * (max - min) + min).toFixed(0),
    (Math.random() * (max - min) + min).toFixed(0),
    (Math.random() * (max - min) + min).toFixed(0),
    (Math.random() * (max - min) + min).toFixed(0),
    (Math.random() * (max - min) + min).toFixed(0),
    search
  ]
}

let echarts = inject<any>('$echarts')
echarts.use([LegendComponent])
echarts.use([ToolboxComponent])

let echartInit = () => {
  let option: ECOption = {
    title: {
      text: '关键词广告转化率',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      bottom: '0',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['50%', '70%'],
        itemStyle: {
          borderRadius: 5,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: getUnClick(), name: '未点击' },
          { value: getClick(), name: '点击' }
        ]
      }
    ]
  }

  var myChart = echarts.init(document.getElementById('chart'))
  myChart.setOption(option)
}
let echartInit2 = () => {
  // https://echarts.apache.org/examples/zh/editor.html?c=line-stack
  let option: ECOption = {
    title: {
      text: '关键词广告搜索量变化曲线',
      left: 'center'
    },
    // legend: {
    //   data: ['搜索量']
    // },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['6天前', '5天前', '4天前', '3天前', '2天前', '1天前', '今日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '搜索量',
        type: 'line',
        stack: 'Total',
        data: getSearch()
      }
    ],
    tooltip: {
      show: true
    }
  }

  var myChart = echarts.init(document.getElementById('chart2'))
  myChart.setOption(option)
}
onMounted(() => {
  echartInit()
  echartInit2()
})
</script>

<template>
  <ContentWrap :title="'关键词广告效益分析和可视化'">
    <div class="container items-center">
      <div id="chart2"></div>
      <div id="chart"></div>
      <div class="text">
        <p>目标投入</p>
        <span>{{ getCost() }} WRMB</span>
        <p>CPC</p>
        <span>{{ getCPC() }} RMB/次</span>
      </div>
    </div>

    <el-table :data="tableData" style="width: 100%" height="500">
      <el-table-column label="序号" type="index" width="70" align="center" />
      <el-table-column index="1" prop="keyword" label="关键字" width="100" />
      <el-table-column prop="search_volume" label="每周搜索量(人次）" width="150" />
      <el-table-column prop="level" label="竞争程度" width="100" />
      <el-table-column prop="cost" label="花销(W)" width="150" />
      <el-table-column prop="show_number" label="曝光量" width="120" />
      <el-table-column prop="click" label="点击量" width="120" />
      <el-table-column prop="transform" label="转化率" width="120" />
      <el-table-column prop="text" label="文案" width="300" />
    </el-table>
  </ContentWrap>
</template>

<style>
.container {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#chart {
  height: 80%;
  width: 20%;
}

#chart2 {
  height: 80%;
  min-width: 40%;
}

.text {
  min-width: 20%;
  align-items: center;
}

.text p {
  color: rgb(128, 128, 128);
  margin-bottom: 0;
}

.text span {
  font-size: 30px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
</style>
